<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="24">
        <div class="tools">
          <el-button type="primary" @click="addFirsts">添加</el-button>
        </div>
        <el-input
          style="padding: 5px 5px 10px;"
          placeholder="输入关键字进行过滤"
          v-model="filterText"
        >
        </el-input>
        <el-tree
          :data="treedata"
          :props="defaultProps"
          @node-click="handleNodeClick"
          :render-content="renderContent"
          ref="tree"
          :filter-node-method="filterNode"
        />
      </el-col>
      <!-- <el-col :span="20">12312</el-col> -->
    </el-row>

    <el-dialog :title="dialogtitle" :visible.sync="dialogVisible" width="500px">
      <el-form
        :model="validateForm"
        ref="validateForm"
        label-width="auto"
        size=""
      >
        <el-form-item
          label="名称："
          prop="name"
          :rules="[{ required: true, message: '名称不能为空' }]"
        >
          <el-input
            v-model.tr="validateForm.name"
            autocomplete="true"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('validateForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  GetCategoryList,
  AddFirst,
  GetFullList,
  Addprodect,
  DelFirst,
  AddProductType
} from "@/api/classificationset/category";
export default {
  data() {
    return {
      filterText: "",
      dialogVisible: false,
      validateForm: { name: "" },
      dialogLevel: 0,
      dialogtitleList: ["添加类目", "添加产品", "添加产品类型"],
      treedata: [],
      nodeCacheData: {},
      defaultProps: {
        children: "childern",
        label: "name"
      }
    };
  },
  computed: {
    /**对画框标题名称 */
    dialogtitle() {
      return this.dialogtitleList[this.dialogLevel];
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    handleNodeClick(data) {
      console.log(data);
    },
    /**获取第一级数据 */
    getFList() {
      GetFullList().then(res => {
        this.treedata = res.data;
      });
    },
    /**添加一级数据 */
    addFirsts() {
      this.dialogLevel = 0;
      this.dialogVisible = true;
    },
    /**对画框提交 */
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const { node } = this.nodeCacheData;
          switch (this.dialogLevel) {
            case 0:
              AddFirst({ name: this.validateForm.name }).then(() => {
                this.getFList();
                this.dialogVisible = false;
              });
              break;
            case 1:
              Addprodect({
                name: this.validateForm.name,
                categoryId: node.data.id
              }).then(() => {
                this.getFList();
                this.dialogVisible = false;
              });
              break;
            case 2:
              let { node } = this.nodeCacheData;
              console.log(231);
              AddProductType({
                name: this.validateForm.name,
                productId: node.data.id
              }).then(() => {
                this.getFList();
                this.dialogVisible = false;
              });
              break;
          }
        } else {
          return false;
        }
      });
    },
    renderContent(h, { node, data, store }) {
      const popconfirmTitle = `这条数据【${data.name}】确定删除吗？`;
      return (
        <div class="custom-tree-node">
          <span>{node.label}</span>
          <span>
            <el-button
              size="mini"
              type="text"
              on-click={event => {
                event.stopPropagation();
                this.append(node, data);
              }}
            >
              添加
            </el-button>
            <el-popconfirm
              title="这条数据确定删除吗？"
              on-confirm={event => {
                {
                  this.remove(node, data);
                }
              }}
            >
              <el-button
                style="margin-left:5px"
                slot="reference"
                size="mini"
                type="text"
                on-click={event => {
                  event.stopPropagation();
                }}
              >
                删除
              </el-button>
            </el-popconfirm>
          </span>
        </div>
      );
    },
    /**添加子类 */
    append(node, data) {
      // console.log(node, data);
      this.nodeCacheData = { node };
      this.dialogLevel = node.level;
      console.log(this.dialogLevel);
      this.dialogVisible = true;
    },
    remove(node) {
      console.log(node.level);
      switch (node.level) {
        case 1:
          DelFirst(node.data.id).then(() => {
            this.getFList();
          });
          break;
      }
    }
  },
  created() {
    this.getFList();
  }
};
</script>
<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
<style lang="scss" scoped>
.tools {
  padding: 10px 5px;
}
</style>
